<template>
	<!--登录 -->
	<view class="page-content">
		<!-- 标题栏和状态栏占位符 -->
		<view class="titleNview-placing"></view>
		<view class="page-top">
			<image class="t-logo" src="/static/index/logo.png"></image>
		</view>
		<view class="index-header">
			<!--导航-->
			<view class="nav">
				<view class="nav-item" @click="handleActive(1)"
					:class="[active === 1 ? 'active' : active === 2 ? '' : '']">
					{{i18n.login.name}}
				</view>
				<view class="nav-item" @click="handleActive(2)"
					:class="[active === 1 ? '' : active === 2 ? 'active' : '']">
					{{i18n.register.name}}
				</view>
			</view>
		</view>
		<view class="page-body">
			<!--登录-->
			<view class="body-item" v-if="active=== 1">
				<!-- 登录输入界面 -->
				<view class="login_input_box">
					<view class="input-group">
						<view class="input-row">
							<image class="icon-tb" src="/static/icon/icon-sj.png"></image>
							<input class="input-row-w" type="number" v-model="params.mobile" :placeholder="i18n.login.plaPho"
								></input>
						</view>
						
						<view class="input-row">
							<image class="icon-tb" src="/static/icon/icon-mm.png"></image>
							<input class="input-row-w" type="password" v-model="params.pass" :placeholder="i18n.login.plaPsd"
								 displayable="true"></input>
						</view>
						<view class="btn-row">
							<button type="primary" class="primary" @tap="bindLogin">{{i18n.login.names}}</button>
						</view>
						<view class="psd-reg">
							<view class="" @click="toforget">{{i18n.login.forgetTxt}}</view>
						</view>
					</view>
				</view>
			</view>

			<!--注册-->
			<view class="body-item" v-if="active === 2">
				<!-- 注册输入界面 -->
				<view class="login_input_box">
					<view class="input-group">
						<view class="input-row">
							<image class="icon-tb" src="/static/icon/icon-sj.png"></image>
							<input class="input-row-w" type="number" v-model="formdata.mobile" :placeholder="i18n.register.plaPho"
								></input>
						</view>
						<view class="input-row-code">
							<view class="input-row-code-l">
								<image class="icon-tb" src="/static/icon/icon-yzm.png"></image>
								<input type="number" class="input-row-w" clearable v-model="formdata.sms_code" :placeholder="i18n.register.plaCode" :maxLength="6"></input>
							</view>
							<view class="input-row-code-r">
								<button size="mini" :disabled="btnDis" @tap="sendCode">{{i18n.register.btnText}}</button>
							</view>
						</view>
						<view class="input-row">
							<image class="icon-tb" src="/static/icon/icon-mm.png"></image>
							<input class="input-row-w" type="password" v-model="formdata.pass" :placeholder="i18n.register.plaPsd"
								 displayable="true"></input>
						</view>

						<view class="btn-row">
							<button type="primary" class="primary" @tap="register">注 册</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		sendSmss,
		logins,
		registers, 
	} from '@/common/api.js';
	import  store  from '@/store'
	//import graceChecker from '@/common/graceChecker.js';
	//import formRuleConfig from '@/common/formRule.config.js';
	export default {
		components: {
		},
		data() {
			return {
				active: 1, //tab导航
				btnDis:false,
				params: {
					mobile: '',
					pass: ''
				},
				formdata:{
					mobile: '',
					sms_code:'',
					pass: '',
					type:'3344',
					sms_type:'3344'
				},
				reqBody: {},
				submitBtnDis: false,
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(query) {
			console.log(1234)
			this.params.mobile = '17700084283'; 
			this.params.pass = '123123';
			this.formdata.sms_code = '9999';
		},
		methods: {
			...mapActions('user',['setToken']),
			//注册
			register(){
				let resdata = this.formdata;
				let _self = this;
				if (resdata.mobile === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.sms_code === "") {
					uni.showToast({
						title: "验证码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.pass === "") {
					uni.showToast({
						title: "密码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				registers(resdata).then(res =>{
					if(res.code === 2000){
						uni.showToast({
							title: '注册成功！',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
						  _self.active = 1;
						}, 500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//登录
			bindLogin() {
				let _self = this;
				let resdata = this.params;
				if (resdata.mobile === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.pass === "") {
					uni.showToast({
						title: "请输入密码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				logins(resdata).then(res =>{
					console.log(333,res)
					if(res.code === 2000){
						const token = res.data.token;
						store.state.token = token
						console.log('token',store.state.token)
						_self.setToken(token)
						uni.switchTab({
							url: '/pages/home/home',
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					
				})
			},
			//导航点击
			handleActive(e) {
				let _self = this;
				_self.active = e;
			},
			//跳转比赛详情
			toforget() {
				uni.navigateTo({
					url: `/pages/login/forget`
				})
			},
			// 发送验证码
			async sendCode() {
				let resdata = this.formdata;
				if (resdata.phone === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				sendSmss(resdata).then(res =>{
					if(res.code === 2000){
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
				// 开启倒计时
				this.countDown();
			},
			
			// 验证码倒计时
			countDown() {
				let t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(t);
				this.$t('message').register.btnText = `${timer}s`;
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.$t('message').register.btnText = this.$t('message').register.btnText2;
						this.btnDis = false;
						return;
					}
					timer--;
					this.$t('message').register.btnText = `${timer}s`;
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}
	.page-content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
	}

	.page-top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 340rpx;

		.t-logo {
			width: 414rpx;
			height: 68rpx;
		}
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.index-header {
		display: flex;
		flex-direction: column;
		width: 530rpx;
		height: 84rpx;
		margin: 0 auto -42rpx;
		background-color: $uni-bg-box-color;
		border-radius: 42rpx;
		position: relative;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.19);

		.nav {
			height: 84rpx;
			display: flex;
			align-items: center;
			text-align: center;
			font-size: 36rpx;
			font-weight: 400;
			color: $font-color-w;

			.nav-item {
				flex: 1;
				position: relative;

				&.active {
					height: 84rpx;
					line-height: 84rpx;
					border-radius: 42rpx;
					background: $uni-but-bg-color;

				}
			}
		}
	}

	.page-body {
		height: calc(100% - 342rpx);
		background-color: $uni-bg-box-color;

		.body-item {
			margin: 0rpx 32rpx;
			height: 100%;
		}
	}

	.icon-tb {
		width: 24rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}


	.login_input_box {
		display: flex;
		flex: 1;
		padding: 40rpx 20rpx;

		.input-group {
			display: flex;
			flex: 1;
			flex-direction: column;
			padding: 30rpx 70rpx 0 70rpx;
			//background-color: #fff;

			.input-row {
				display: flex;
				align-items: center;
				flex: 1;
				width: 100%;
				height: 84rpx;
				border-bottom: 1rpx solid rgba(210,210,210,.4);
				flex-direction: row;
				background: $uni-bg-box-color;
				margin-top: 40rpx;


				.input-row-w {
					display: flex;
					flex: 1;
					width: 100%;
					height: 84rpx;
					color: $font-color-w;
					font-size: 28rpx;
				}
			}
			
			.input-row-code {
				width: 100%;
				display: flex;
				align-items: center;
				flex: 1;
				height: 84rpx;
				flex-direction: row;
				background: $uni-bg-box-color;
				margin-top: 40rpx;
				border-bottom: 1rpx solid rgba(210,210,210,.4);
				margin-top: 40rpx;
			
				.input-row-code-l {
					flex: 65;
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					.input-row-w {
						display: flex;
						flex: 1;
						width: 100%;
						color: $font-color-w;
						font-size: 28rpx;
					}
				}
			
				.input-row-code-r {
					flex: 35;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
			
					button {
						width: 200rpx;
						height: 84rpx;
						line-height: 84rpx;
						padding: 0 10rpx;
						font-size: 28rpx;
						background: (0,0,0,0);
						border-radius: 0rpx;
						color: #fff;
					}
			
				}
			}

			.tips {
				padding-left: 20rpx;
				margin-top: 20rpx;
				color: #8c8c8c;
				font-size: 26rpx;
			}

			.btn-row {
				margin-top: 90rpx;

				button {
					line-height: 84rpx;
					background: $uni-but-bg-color;
					font-size: 36rpx;
					color: $font-color-w;
					height: 84rpx;
					box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.19);
					border-radius: 42rpx;
				}
			}

			.psd-reg {
				display: flex;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 28rpx;
				margin-top: 30rpx;
				color: #868686;

				view {
					flex: 1;
					text-align: center;
				}
			}
		}
	}
</style>
